<template>
    <el-menu default-active="1" router class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="/">
            <i class="el-icon-setting"></i>
            <template #title>配置图表</template>
        </el-menu-item>
        <el-menu-item index="Demo">
            <i class="el-icon-menu"></i>
            <template #title>查看图表</template>
        </el-menu-item>
        <el-menu-item index="Template">
            <i class="el-icon-menu"></i>
            <template #title>模板</template>
        </el-menu-item>

        <!-- <div class="collapse-btn">
            <i class="el-icon-s-fold" v-if="!isCollapse" @click="isCollapse = !isCollapse"></i>
            <i class="el-icon-s-unfold" v-if="isCollapse" @click="isCollapse = !isCollapse"></i>
        </div> -->
    </el-menu>
</template>

<script>
export default {
    name: 'Menus',
    data() {
        return {
            isCollapse: false,
        };
    },
    methods: {
        handleSelect() {
            console.log(this.$route);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.el-menu {
    height: 100%;
    position: relative;
    // li {
    //     .el-submenu__title {
    //         padding: 0 50px;
    //     }
    // }
    // .el-menu-item {
    //     padding: 0 50px;
    // }
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
.collapse-btn {
    width: 100%;
    height: 30px;
    // border-top: 1px solid #ccc;
    box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.5);
    text-align: center;
    line-height: 30px;
    position: absolute;
    bottom: 0px;
}
</style>
